<template>
  <table-index class="insure-card-table" :table="table" @loadData="loadData">
    <template #operate="{ record }">
      <div class="blue-text" @click="goList(record)" v-permission="'svms:asstes:device:car-virtual-key'"> 查看 </div>
    </template>
  </table-index>
</template>
<script setup>
  import { reactive, onMounted, ref } from 'vue'
  import { useTable } from '@/hooks/table'
  import { getSelectByRefCode } from '@/api/asset/carTbox'
  import useNavigate from '@/hooks/useNavigate'
  import { getShortOrdrDetails } from '@/api/order/sOrder'
  import { getLongOrderDetails } from '@/api/order/czsOrder'

  const { navigateTo } = useNavigate()

  const props = defineProps({
    type: {
      type: String,
      default: '',
    },
    orderId: {
      type: String,
      default: '',
    },
  })

  const queryParam = reactive({
    refType: props.type,
    refCode: '',
  })

  const operateList = ref([])
  const table = useTable({
    dataList: operateList,
    columns: [
      { title: '单据号', dataIndex: 'controlCode', width: 200 },
      { title: '控车单开始时间', dataIndex: 'startTime', width: 180 },
      { title: '控车单结束时间', dataIndex: 'endTime', width: 180 },
      { title: '控车人姓名', dataIndex: 'memberName', width: 140 },
      { title: '控车人手机号', dataIndex: 'memberPhone', width: 140 },
      { title: '车牌号', dataIndex: 'licenseNo', width: 200 },
      { title: '关联业务类型', dataIndex: 'refTypeName', width: 200 },
      { title: '关联业务单号', dataIndex: 'refCode', width: 200 },
      { title: '车架号', dataIndex: 'vin', width: 200 },
      { title: '车型', dataIndex: 'modelName', width: 200 },
      { title: '单据状态', dataIndex: 'statusName', width: 120 },
      { title: '操作', dataIndex: 'operate', slotName: 'operate', fixed: 'right', width: 140 },
    ],
    tableLoading: false,
    pagination: false,
  })

  const goList = () => {
    navigateTo(`/order/car-virtual-key?refCode=${queryParam.refCode}`)
  }
  const getDetails = () => {
    let fetch = getShortOrdrDetails
    if (props.type == 2) {
      fetch = getLongOrderDetails
    }
    fetch({ id: props.orderId }).then((res) => {
      queryParam.refCode = props.type == 1 ? res.result?.orderInfo.orderCode : res.result?.orderInfo.orderNo
      getSelectByRefCodeFn()
    })
  }
  const getSelectByRefCodeFn = () => {
    getSelectByRefCode({ ...queryParam }).then((res) => {
      operateList.value = res.result
    })
  }

  onMounted(() => {
    if (props.orderId) {
      getDetails()
    }
  })
</script>
<style scoped lang="less">
  .blue-text {
    font-size: 14px;
    font-weight: 400;
    color: #3370ff;
    cursor: pointer;
  }
</style>
